<template>
  <div class="reserve-box">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="pro in reserveProjectList" :key="pro.id" :title="pro.name" :name="pro.id">
        <template slot="title">
          <div class="project-name">
            <i class="header-icon el-icon-date" />
            {{ pro.name }}
          </div>
        </template>
        <reserve-calendar v-model="dateValues[pro.id]" :class="`reserve-calendar${activeName}`">
          <template #dateCell="{ data }">
            <div :class="[disabledDate(data.day) ? 'disable-date' : '']">
              <p :class="data.isSelected ? 'is-selected' : ''" class="date">
                {{ data.day.split('-').slice(1).join('-') }}
              </p>
              <p class="text">
                {{ calcQuotaWeek(pro, data.day) }}
              </p>
            </div>
          </template>
        </reserve-calendar>
        <el-alert
          v-if="dateValues[pro.id]"
          :title="`已选：${formatDate(pro.id)}`"
          type="success"
          @close="handleCancelSelect(pro.id)"
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import mixin from '../mixin'
import ReserveCalendar from './ReserveCalendar'
import { getRequest } from '../../../api/baseRequest'

let formatDate = (date) => {
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  return `${year}-${month}-${day}`
}

export default {
  name: 'TReserve',
  components: { ReserveCalendar },
  mixins: [mixin],
  props: {
    reserveProjectList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      activeName: 1,
      dateValues: {},
      // 已经预约的数量
      dateReserveCount: {}
    }
  },
  created() {
    let value = this.value || {}
    for (let key of Object.keys(value)) {
      this.dateValues[key] = new Date(value[key])
    }
  },
  computed: {},
  watch: {
    dateValues(val) {
      this.$emit('input', val)
    },
    activeName(val) {
      this.changeDate(formatDate(new Date()))
    }
  },
  methods: {
    handleCancelSelect(id) {
      this.dateValues[id] = null
    },
    changeDate(day) {
      //日期增加30天
      let date = new Date(day)
      let startDate = new Date()
      startDate.setDate(date.getDate() - 35)
      let endDate = new Date()
      endDate.setDate(date.getDate() + 35)
      getRequest('/form/ext/getReservationCount', {
        formKey: this.$route.params.key,
        formItemId: this.$attrs.dId,
        projectId: this.activeName,
        startDate: formatDate(startDate),
        endDate: formatDate(endDate)
      }).then((res) => {
        this.dateReserveCount = res.data
      })
    },
    //计算剩余名额
    calcQuotaWeek(project, day) {
      let date = new Date(day)
      // 比较日期天是否大于当前日期
      // 格式化日期 YY-MM-DD
      if (date < new Date(formatDate(new Date()))) {
        return ''
      }
      if (project.quotaWeek[date.getDay()]) {
        // 获取是周几
        let count = this.dateReserveCount[day] || 0
        return '余' + (project.quotaWeek[date.getDay()] - count)
      }
      return '充足'
    },
    formatDate(id) {
      let da = this.dateValues[id]
      if (!da) {
        return ''
      }
      return formatDate(da)
    },
    // 禁用没开放的日期
    disabledDate(day) {
      // 当前项目
      let project = this.reserveProjectList.find((item) => item.id === this.activeName)
      if (!project) {
        return false
      }
      let reserveDateRange = []
      // 当前开放的日期范围
      if (project.reserveDateRangeType && project.reserveDateRangeType == 2) {
        reserveDateRange = project.reserveDateRange || []
      }
      // 开放的周期
      let openWeekDays = project.openWeekDays
      let date = new Date(day)
      if (
        reserveDateRange &&
        reserveDateRange.length == 2 &&
        (date < new Date(reserveDateRange[0]) || date > new Date(reserveDateRange[1]))
      ) {
        return true
      }
      if (openWeekDays && openWeekDays.length > 0 && !openWeekDays.includes(date.getDay())) {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.reserve-box .project-name {
  padding-left: 20px;
  font-weight: bold;
}

.reserve-box .text {
  font-size: 0.6rem;
  margin-top: 0;
  font-weight: normal;
  color: var(--form-theme-color);
}

.disable-date {
  color: #ccc;
  cursor: none;

  .text {
    color: #ccc;
  }
}

::v-deep.reserve-box .el-calendar-day {
  height: 60px !important;
  text-align: center !important;
}

::v-deep.reserve-box .el-calendar-table .is-selected .el-calendar-day:hover {
  background-color: var(--form-theme-color);
  color: #fff;
}

::v-deep.reserve-box .el-calendar-table td.is-selected {
  background-color: var(--form-theme-color);
  color: #fff;

  .text {
    color: #fff;
  }
}

@media screen and (max-width: 500px) {
  ::v-deep.reserve-box .el-calendar-day {
    height: 50px !important;
    padding: 0px !important;
    text-align: center !important;
  }
}
</style>
